Menade du?

    • Java är ett programmeringsspråk

    JavaScript

    Logotyp för JavaScript

    Förkortningar

    • JS - JavaScript
    • JSC - JavaScriptCore

    • JSON - JavaScript Object Notation

    • DOM - Document Object Model
    • XSS - Cross-site scripting
    • WYSIWYG - What You See Is What You Get
    • AJAX - Asynchronous JavaScript and XML
    • AMASS - AJAX Massive Storage System
    • XHR - XMLHTTPRequest
    • XDR - XDomainRequest
    • CORS - Cross-Origin Resource Sharing
    • JSSS - JavaScript-Based Style Sheets
    • ECMA - European Computer Manufacturers Association
    • HBS - Handlebars
    • LD - Linked Data
    • IIFE - Immediately-Invoked Function Expression
    • OLOO - objects linked to other objects

    Förkortningar

    • JSX - JavaScript XML

    Filändelser

    • .js
    • .jsx
    Logotyp för Open JavaScript Foundation

    Grupp

    Kommentarer

    // En kommentar /* En kommentar */

    Standardisering

    ISO/IEC 16262

    Typer

    • Vanilla javascript
    • Modern javascript
    • Omodern javascript
    Logotyp för JSON -

    Delar

    Logotyp för Coffee script

    Reserverade variabler

    • Får inte börja med en siffra (dock innehålla)
    • Får inte innehålla matematisk logik
    • Får inte innehålla punktion
    • Får inte innehålla mellanslag
    • Får inte vara window, open, location eller string

    • Javascript är versalkänsligt
    Var, let & const

    Typer variabler

    • var
    • let
    • const

    Värden

    • undefined
    • false
    • 0
    • Null

    Tal över 999999999999999934463 skrivs om till 1e+21

    Attribut för event i HTML

    • onblur
    • onclick
    • onerror
    • onfocus
    • onkeydown
    • onkeypress
    • onkeyup
    • onmouseover
    • onload
    • onmouseup
    • onmousedown
    • onsubmit

    Fler event från Apple

    • loadstart
    • canplaythrough
    • canplay
    • loadeddata
    • loadedmetadata
    • abort
    • emptied
    • error
    • stalled
    • suspend
    • waiting
    • pause
    • play
    • volumechange
    • playing
    • seeked
    • seeking
    • durationchange
    • progress
    • ratechange
    • timeupdate
    • ended
    • webkitbeginfullscreen
    • webkitendfullscreen

    Här kan du hitta ännu fler event

    Testning

    Logotyp för Zepto Logotyp för Zepto JS Logotyp för jQuery Logotyp för Angular Logotyp för React Logotyp för Vue.js Logotyp för SVELTE

    Stora ramverk

    Logotyp för Zepto Logotyp för Zepto JS Logotyp för jQuery

    Liknande

    Ikon för Java Logotyp för Typescript

    Liknande namn

    Vanilj

    Kuriosa

    Tagg i HTML som visas när JavaScript inte är aktiverat

    <noscript>JavaScript är inte aktiverat</noscript>

    Avaktivera JavaScript för Safari på iOS

    Ramverk

    Visa alla Logotyp för jQuery Logotyp för Angular Logotyp för React Logotyp för Vue.js Logotyp för Typescript Logotyp för Node Logotyp för NPM - Logotyp för Grunt Logotyp för Gulp Logotyp för Zepto Logotyp för Zepto JS Logotyp för JavaScript framework Knockout Logotyp för three.js Logotyp för Glimmer Logotyp för BABEL Logotyp för BABEL Logotyp för SVELTE Logotyp för Rollup.js

    Plugins

    Funktioner

    • eval
    • indexOf
    • isNaN
    • join
    • length
    • parseFloat
    • replace
    • slice
    • splice
    • split
    • toString
    • getAttribute
    • setAttribute
    • dataset
    • querySelectorAll
    • offsetLeft
    • offsetTop
    • keyCode
    • tagName

    Attribut för JavaScript i HTML

    • defer
    • async

    Teckenuppsättning i Javascript

    document.characterSet Testa här

    Skapa ett element

    document.createElement('meta')

    Ovanliggande element

    .parentNode

    Flytta ett element framför ett annat

    parentElement = elementToMove.parentNode; siblingElement = parentElement.querySelector('.sibling-element'); parentElement.insertBefore(elementToMove, siblingElement);

    Bredd på element

    .offsetWidth

    Arbeta offline (utan internet)

    navigator.onLine

    Säker anslutning (med SSL)

    document.location.protocol Testa här

    Meddelanden

    document.write('Lorem ipsum') console.log('Lorem ipsum') Testa här console.table(['anders', 'andersson'], ['erik', 'eriksson'], ['sven', 'svensson']) Testa här alert('Lorem ipsum') Testa här

    Prompt

    prompt('title', 'message') Testa här

    Nuvarande URL

    location.href Testa här

    Ändra URL

    location = "//www.example.com" Testa här

    Historik

    Bakåt

    window.history.go(-1) Testa här

    Öppna nytt fönster

    window.open('//www.example.com') Testa här

    Operativsystem

    navigator.oscpu Testa här

    Webbläsare

    navigator.userAgent Testa här

    Mobil webbläsare

    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) Testa här

    Språk

    navigator.language Testa här

    Cookies aktiverat

    navigator.cookieEnabled Testa här document.cookie Testa här

    Plugins aktiverat

    navigator.plugins.forEach(function(el, i) { alert(el); }); x = navigator.plugins.length; alert('Total plugin installed: ' + x); for (i = 0; i < x; i++) { alert(navigator.plugins[i].name); } Testa här

    Flash aktiverat

    navigator.mimeTypes ["application/x-shockwave-flash"]

    Java aktiverat

    navigator.javaEnabled Testa här

    Tillgång till internet

    navigator.onLine Testa här

    Random

    Random värde med JavaScript

    Returnera ett random nummer mellan 0 (inklusive) och 1 (exklusive).

    Math.random(); Testa här

    Mellan 0-10

    Math.floor(Math.random()*11) Testa här

    Random värde från array med JavaScript

    rand = myArray[Math.floor(Math.random() * myArray.length)];

    Random färg med JavaScript

    document.body.style.background = '#' + (Math.random().toString(16) + "000000").substring(2,8); Testa här

    Tid

    Datum

    Date() Testa här new Date() Testa här

    ISO

    new Date().toISOString() Testa här now = new Date(); now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate() + " " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

    UNIX timestamp

    Date.now() new Date().now() new Date().getTime() Testa här

    UTC (oavsett tidszon)

    new Date().toLocaleDateString(); Testa här new Date().toLocaleTimeString(); Testa här hours = now.getUTCHours() minutes = now.getUTCMinutes() seconds = now.getUTCSeconds()

    Klocka kommer snart

    setInterval(function() { new Date.getHour() + ':' + new Date().getSeconds(); }, 1000) 00:00 Testa här

    Countdown kommer snart

    setInterval(function() {}, 1000) 10 Testa här Muspekare Muspekare

    Lyssnare på event

    element.onclick = doSomething element.addEventListener('click', doSomething, false)

    Typ av event

    event.type

    Förhindra event

    return false event.preventDefault() event.stopPropagation() void(0)

    Upplösning

    Fönster

    Höjd

    window.innerHeight Testa här

    Bredd

    window.innerWidth Testa här

    Skärmen

    Höjd

    screen.height Testa här

    Bredd

    screen.width Testa här

    Knapp på tangentbord

    event.key event.keyCode

    Knapp på mus

    Position på mus

    window.onmousemove

    Skärmen

    event.screenX event.screenY

    Fönster

    event.clientX event.clientY

    Klick med mus på element

    event.target.tagName

    Touch

    event.touches[0].pageX event.touches[0].pageY

    Webbapplikationer

    window.navigator.standalone

    Riktning på enhet

    window.orientation Testa här

    Gyroskop

    Rörelse

    window.ondevicemotion

    Riktning

    window.ondeviceorientation

    GPS

    navigator.geolocation.getCurrentPosition() Testa här

    Dataset (HTML 5)

    element.dataset.key = 'Lorem ipsum'

    Web storage (HTML 5)

    localStorage.setItem(key, value) localStorage.getItem(key)

    Strict

    "use strict";

    Klasser på body

    document.getElementsByTagName('body')[0].classList

    Modifiera klasser på body

    this.body.classList.add('expanded'); this.body.classList.remove('expanded'); this.body.classList.toggle('expanded'); this.body.classList.contains('expanded');

    Protokoll

    document.location.protocol Testa här

    Ta bort element

    this.remove()

    Välj element

    document.querySelector('body')

    Retina

    window.devicePixelRatio Testa här

    Beräkna återstående tid för batteri

    navigator.battery.dischargingTime Testa här

    Teckenkod

    "a".charCodeAt(0)

    Valt option i select-element

    document.getElementsByTagName('select')[0].options[document.getElementsByTagName('select')[0].selectedIndex]

    .getBoundingClientRect()

    Lägg till Zepto med hjälp av JavaScript

    var script = document.createElement('script'); //script.type = 'text/javascript'; script.src = '//zeptojs.com/zepto.min.js'; document.getElementsByTagName('head')[0].appendChild(script);

    Lägg till jQuery med hjälp av JavaScript

    var script = document.createElement('script'); //script.type = 'text/javascript'; script.src = '//code.jquery.com/jquery-latest.min.js'; document.getElementsByTagName('head')[0].appendChild(script);

    Lägg till Zepto i parent head

    var stickyWallpaper = document.createElement('script'); stickyWallpaper.src = 'https://zeptojs.com/zepto.min.js'; window.parent.document.head.appendChild(stickyWallpaper);

    Lägg till jQuery i parent head

    var stickyWallpaper = document.createElement('script'); stickyWallpaper.src = '//code.jquery.com/jquery-latest.min.js'; window.parent.document.head.appendChild(stickyWallpaper);

    Skrolling

    window.pageYOffset Testa här document.body.scrollTop Testa här window.scrollY Testa här window.scrollTo(0, document.body.scrollHeight); Testa här document.body.scrollHeight Testa här window.outerHeight Testa här document.height Testa här document.body.clientHeight Testa här

    Vibration

    navigator.vibrate(1000); Testa här

    Geolocation

    navigator.geolocation.getCurrentPosition(function(pos){ var crd = pos.coords; console.log('Your current position is:'); console.log(`Latitude : ${crd.latitude}`); console.log(`Longitude: ${crd.longitude}`); console.log(`More or less ${crd.accuracy} meters.`); }, function(err) {alert(err)}); Testa här

    Audio

    navigator.mozGetUserMedia({video: false, audio: true}, function(mozLocalMediaStream) {alert(mozLocalMediaStream)}, function(err) {alert(err)}); Testa här

    Video

    navigator.mozGetUserMedia({video: true, audio: false}, function(mozLocalMediaStream) {alert(mozLocalMediaStream)}, function(err) {alert(err)}); Testa här

    Notiser

    Post message

    Fullscreen

    Clipboard

    Loop

    obj = document.querySelectorAll('img'); obj.forEach(function(el, i) { el.onclick = function() { alert(arr[i]); }; });

    Kärnor

    navigator.hardwareConcurrency Testa här

    Canvas

    canvas = document.createElement('canvas'); ctx = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); console.log(ctx.getSupportedExtensions()); Testa här Testa här

    GPU

    console.log(ctx.getParameter(ctx.RENDERER)); console.log(ctx.getParameter(ctx.VENDOR)); console.log(ctx.getParameter(ctx.getExtension("WEBGL_debug_renderer_info").UNMASKED_RENDERER_WEBGL)); console.log(ctx.getParameter(ctx.getExtension("WEBGL_debug_renderer_info").UNMASKED_VENDOR_WEBGL)); Testa här

    Aktivt element

    document.activeElement

    Klasser

    document.body.classList.add('class'); document.body.classList.remove('class'); document.body.classList.toggle('class'); document.body.classList.contains('class');

    Manipulera URL

    Encode URL

    will not encode @*/+

    escape()

    will not encode ~!@#$&*()=:/,;?+'

    encodeURI()

    will not encode ~!*()'

    encodeURIComponent()

    Nuvarande URL

    document.URL Testa här location.href Testa här location.origin Testa här location.hash Testa här location.host Testa här location.hostname Testa här location.href Testa här location.pathname Testa här location.port Testa här location.protocol Testa här location.search Testa här

    Första stilmallen

    document.styleSheets[0].href Testa här

    Exempel på test med regex i JavaScript

    new RegExp('ipsum','g').test('Lorem ipsum dolor') Testa här

    Ramverkt på JsFiddle

    Sätt header för Javascript med PHP

    header('Content-Type: application/javascript'); header('Content-Type: text/javascript');

    Länkar

    Externa länkar

    Babels torn CodeCardCodingCards by Lingonsaft Logotyp för RxJS Logotyp för RxJS

    Editorer